<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert_Title_Here</title>
		<link rel="Shortcut Icon" href="Insert_Favicon_Here" />
		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css" />
		<script src="public/js/jquery-3.2.1.min.js"></script>
		<script src="public/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="public/css/style.css" />
	</head>
	<style>
		
	</style>
	<body>
		<!--顶部效果-->
		<%@ include file="/Header.jsp" %>
		
		<!--主体部分-->
	<style>
		*{
			font-family: "微软雅黑";
			margin: 0px;
			padding: 0px;	
		}
		caption{
			text-align: center;
			font-size: 30px;
			padding-bottom: 30px;
		}
		th{
			text-align: center;
			font-size: 20px;
			width: 250px;
			height: 50px;
		}
		table{
			width: 700px;
			margin: 0 auto;
		}
		td{
			height: 220px;
			width: 250px;
			font-size: 12.5px;
		}
		.col-lg-8{
			border-radius:10px;
			padding-top: 40px;
			padding-bottom: 50px;
			margin-top:10px;
		}
		input[type=file]{
			margin-top: 20px;
		}
		input[type=submit]{
			margin-top:10px;
			font-size: 20px;
			
		}
		#admin{
			text-color:red;
			font-size:20px;
			position: relative;
			margin-top:10px;
			margin-left:1150px;
		}
	</style>
	<script type="text/javascript">
		function checkForm(){
			var valueFolder = document.getElementById("folderName").value;
			var valuefile1 = document.getElementById("fileName1").value;
			var valuefile2 = document.getElementById("fileName2").value;
			var valuefile3 = document.getElementById("fileName3").value;
			var valuefile4 = document.getElementById("fileName4").value;
			var flag = (valueFolder!="")&&(valueFolder!="")&&(valuefile2!="")&&(valuefile3!="")&&(valuefile4!="");
			if(flag){
				return true;
			}
			return false;
		}
	</script>
	<body>
		<div id="admin">
			<a href="${pageContext.request.contextPath}/admin">
				<input type="button" value="管理界面">
			</a>
		</div>
		<div class="container">
			<form action="${pageContext.request.contextPath}/folderServlet?method=upload" method="post" 
				enctype="multipart/form-data" onsubmit="return checkForm()">
				<div class="col-lg-offset-2 col-lg-8" style="background: #ADADAD;" >
					<table border="1px" cellspacing="100px" cellpadding="10px"> 
						<caption>添加数据</caption>
						<c:if test="${requestScope.fileUploadInfo eq \"文件名已存在，请更换文件名！\"}">
							<h3>
								<script>alert("文件名已存在，请更换文件名!")</script>
							</h3>
						</c:if>
						<c:if test="${requestScope.fileUploadInfo eq \"文件上传成功!\"}">
							<h3>
								<script>alert("文件上传成功!")</script>
							</h3>
						</c:if>
						<tr style="background-color: green;">
							<th>文件夹名称</th>
							<th>数据文件</th>
						</tr>
						<tr style="background-color: white;">
							<td style="width:100px;">
								<div style="font-size: 17px; text-align: center; color:black;">文件夹名称：</div>
								<center>
									<input type="text" name="folderName" id="folderName" />
								</center>
							</td>
							<td style="width:500px; font-size:16px;">
								<center>
									<div>
										天气文件：<input type="file" style="display:inline;" name="fileName1" id="fileName1"/>
									</div>
									<div>
										特勤文件：<input type="file" style="display:inline;" name="fileName2" id="fileName2"/>
									</div>
									<div>
										验证数据：<input type="file" style="display:inline;" name="fileName3" id="fileName3"/>
									</div>
									<div>
										机场城市：<input type="file" style="display:inline;" name="fileName4" id="fileName4"/>
									</div>
								</center>
							</td>
						</tr>
					</table>
					<center>
						<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
							<input type="submit" value="添加"/ onclick = "waiting()">
						</button>
					</center>
				</div>
			</form>	
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					提示！
				</h4>
			</div>
			<div class="modal-body">
			<center style="font-size:20px;line-height:1.5;">
				文件夹名称为空或文件上传数量不够时会<span style="color:red;">上传失败！</span><br/>
				上传成功请耐心等待数据处理需要大概20分钟，<br/>
				数据处理完成后会有提示。处理数据时请勿操作此界面！
			</center>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
	</body>
		<!--底部效果-->
		<%@ include file="/Footer.jsp" %>
		
	</body>
</html>